<template>
  <div>
    <div ref="head">
      <sticky>
        <tab :line-width="2" v-model="swiperIndex">
          <tab-item
            @on-item-click="changeSwiperIndex"
            :key="index"
            v-for="(item, index) in statusTag"
          >{{ item.label }}</tab-item>
        </tab>
      </sticky>
    </div>
    <div>
      <swiper :min-moving-distance="5000" id="swipers" :threshold="200" :height="listHeight" :show-dots="false" v-model="swiperIndex" @on-index-change="changeSwiperIndex">
        <swiper-item  class="black" :key="key" v-for="(items, index, key) in orderData">
          <scroller
            :on-refresh="refresh"
            :on-infinite="infinite"
            style="padding-top: 0rem;"
            :noDataText="items.length? '运单已全部加载~~': ''"
          >
            <div class="bj-item" v-for="(item, idx) in items">
              <div @click="toDetail(item.id)">
                <div class="title flex flex-middle flex-space-between">
                  <div class="flex flex-middle">
                    <i class="icon icon-shijian" style="font-size: 0.34rem"></i>
                    <span>{{item.pick_up_time}}前取货</span>
                  </div>
                  <div class="text-orange" v-if="key != statusTag.length - 1 && serverID != 8">
                    中标金额: {{item.freight}}元
                  </div>
                  <div class="text-orange" v-if="key == 0 && serverID == 8">
                    中标金额: {{ item.freight_z || item.freight }}元
                  </div>
                </div>

                <div class="puser vux-1px-b" v-if="item.p_user_info">
                  <div class="usermsg">
                    <img :src="item.p_user_info.face" />
                    <span>{{item.p_user_info.nick_name}}</span>
                  </div>
                  <div>
                    <a :href="'tel:' + item.p_user_info.phone">
                      <i class="icon icon-phone phone-icon"></i>
                    </a>
                  </div>
                </div>

                <div class="info">
                  <div class="item overflowtext">
                    <i class="icon icon-ziyuan21"></i>
                    <span class="addressname">{{item.p_addr}} {{item.p_addr_more}}</span>
                  </div>
                  <div class="item overflowtext">
                    <i class="icon icon-ziyuan11"></i>
                    <span class="addressname">{{item.q_addr}} {{item.q_addr_more}}</span>
                  </div>
                  <div class="item overflowtext" style="margin-bottom: 0rem">
                    <i class="icon icon-Ankerwebicon-"></i>
                    <span>
                      {{item.service || '' }} {{item.goods_list || '' }}{{item.goods_info  || ''}}
                      <span v-if="item.weight > 0">{{item.weight}}{{item.unit}}</span>
                      <span v-if="item.volume > 0">{{item.volume}}方</span>
                      <span v-if="item.number > 0">{{item.number}}件</span>
                      {{ item.package || '' }}
                    </span>
                    <i class="icon icon-image" v-if="item.goods_img1 || item.goods_img2" style="color: #2d8cf0;"></i>
                  </div>
                  <div class="item overflowtext">
                    <i class="icon icon-che" v-if="serverID != 7" style="font-size: 0.36rem"></i>
                    <i class="icon icon-dingdan" v-if="serverID == 7" style="font-size: 0.36rem"></i>
                    <span>
                      {{item.car_id || ''}}
                      {{item.car_length || ''}}
                      {{item.extra_need  || ''}}
                      {{item.has_certificate || ''}}
                      {{item.remark || ''}}
                    </span>
                    <i class="icon icon-baozhang" v-if="item.has_safety > 0" style="color: #2d8cf0;"></i>
                  </div>
                </div>
              </div>

              <div class="moneyinfo vux-1px-t" v-if="serverID == 8">
                <div class="text-orange">运费：{{item.freight || 0}}元</div>
                <div>已收运费：<span class="text-orange">{{item.p_dpay_money || 0}}元</span></div>
              </div>
              <div class="moneyinfo vux-1px-t" style="padding-bottom: 0.07rem;" v-if="serverID == 8">
                <div>信息费：{{item.pay_deposit}}元{{item.deposit_pay_status == 1? '(已支付)': '(已退款)'}}</div>
                <div>已退信息费：{{item.refund_deposit || 0}}元</div>
              </div>

              <div class="action flex flex-middle flex-space-between">
                <div class="text-orange">
                </div>
                <div v-if="serverID != 8">
                  <x-button type="primary" v-if="filterItem.status == 2" @click.native="handleCancle(item.id, index)" action-type="button" class="out-line" mini>
                    取消运单
                  </x-button>
                  <x-button type="primary" v-if="filterItem.status == 2" @click.native="handleReportDriver(item.id)" action-type="button" mini>
                    上报司机
                  </x-button>
                  <x-button type="primary" v-if="filterItem.status == 4 && item.is_comment == 0" @click.native="handleComment(item.id)" action-type="button" mini>评价</x-button>
                  <x-button type="default" disabled v-if="filterItem.status == 4 && item.is_comment == 1" action-type="button" mini>已评价</x-button>
                  <!--<x-button type="primary" v-if="item.status == 3 && serverID == 6" @click.native="handleFinish6(item.id, idx)" action-type="button" mini>上报完成</x-button>-->
                  <!--<x-button type="primary" v-if="item.status == 3 && serverID == 7" @click.native="handleFinish7(item.id, idx)" action-type="button" mini>确认入仓</x-button>-->
                  <x-button type="default" v-if="item.status == 6 && serverID == 6" disabled action-type="button" mini>待货主确认</x-button>
                </div>
                <div v-if="serverID == 8">

                  <x-button type="primary" v-if="filterItem.status == 5 && item.is_comment == 0" @click.native="handleComment(item.id)" action-type="button" mini>评价</x-button>
                  <x-button type="default" disabled v-if="filterItem.status == 5 && item.is_comment == 1" action-type="button" mini>已评价</x-button>
                  <x-button :type="item.yl_status == 2?'default': 'primary'" :disabled="item.yl_status == 2" v-if="filterItem.status == 4" @click.native="handleFinishZc(item.id, idx)" action-type="button" mini>
                    {{item.yl_status == 2?'已上报成功':'上报完成'}}
                  </x-button>
                  <x-button type="primary" v-if="filterItem.status != 6" @click.native="handlePay(index, idx)" action-type="button" mini class="out-line">支付</x-button>
                </div>
              </div>

            </div>

            <div class="null" v-if="!items.length && !isLoading[key]">
              <img src="../../../static/img/nullorder.png" style="height: 2.95rem; width: 3.3rem;">
              <p>您还没有{{statusTag[key].label}}的运单~~</p>
            </div>
          </scroller>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>
<script>
import { Sticky, Swiper, SwiperItem, TransferDom } from 'vux'
import { getDateDiff, get_time_format } from '../../libs/until'
export default{
  directives: {
    TransferDom
  },
  computed: {
    scrollerMarTop() {
      const u = navigator.userAgent
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
      return isAndroid? '-0.2rem': '0rem'
    },
    serverID() {
      return this.$store.state.userInfo.service_id || 0
    },
    filterItemUri() {
      const { service_id } = this.$store.state.userInfo
      if(service_id == 6) {
        return $config.host + '/api/Inquirycitycar/getQuotesPrice'
      } else if(service_id == 7) {
        return $config.host + '/api/Inquiryzerobear/getOrderList'
      } else if(service_id == 8) {
        return $config.host + '/api/Inquirycityvehicle/capacityDriverOrderIsOk'
      }
    },
    cancleUri() {
      const { service_id } = this.$store.state.userInfo
      if(service_id == 6) {
        return $config.host + '/api/Inquirycitycar/cancelCityCar'
      } else if(service_id == 7) {
        return $config.host + '/api/Inquiryzerobear/cancelOrder'
      } else if(service_id == 8) {
        return $config.host + '/api/Inquirycityvehicle/cancelOrder'
      }
    },
    ddUri() {
      return $config.host + '/api/Inquirycitycar/updateQuotesThrees'
    },
    statusTag() {
      const service_id = this.$store.state.userInfo.service_id
      let menu = []
      if(service_id != 8) {
        menu = [{
          value: '2',
          label: '已中标'
        }, {
          value: '3',
          label: service_id == 6?'配送中': '承运中'
        }, {
          value: '4',
          label: '已完成'
        }, {
          value: '5',
          label: '未完成'
        }]
      } else {
        menu = [{
          value: '4',
          label: '运输中'
        }, {
          value: '5',
          label: '已完成'
        }, {
          value: '6',
          label: '已取消'
        }]
      }
      return menu
    }
  },
  components: {
    Sticky,
    Swiper,
    SwiperItem
  },
  created() {
    if(this.serverID == 8) {
      this.filterItem.status = '4'
    }
    this.getData()

  },
  mounted() {
    const bodyHeight = document.documentElement.clientHeight
    const headerHeight = this.$refs['head'].offsetHeight
    const hei = (bodyHeight - headerHeight)
    this.listHeight =  hei + 'px'
  },
  data() {
    return {
      nullMsg: '加载中...',
      listHeight: '0px',
      isLoading: [true, true, true],
      swiperIndex: 0,
      orderData: {
        list0: [],
        list1: [],
        list2: []
      },
      page: [0,0,0],
      pages: [0,0,0],
      filterItem: {
        page: 1,
        pagesize: 10,
        status: '2',
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token,
        uid: this.$store.state.userInfo.uid
      }
    }
  },
  methods: {
    getData(done = () => {}, refresh = '') {
      this.$http.post(this.filterItemUri, qs.stringify(this.filterItem)).then((res) => {
        const {code, data, msg} = res.data
        if(code == '1' && data) {
          this.$set(this.isLoading, this.swiperIndex, true)
          this.page[this.swiperIndex] = parseInt(data.page)
          this.pages[this.swiperIndex] = parseInt(data.pages)
          this.filterItem.page = parseInt(data.page)
          data.data.map(item => {
            item.pick_up_time = get_time_format(item.pick_up_time)
            item.pick_up = getDateDiff(item.pick_up)
            item.deadline = get_time_format(item.deadline)
          })
          //刷新删除所有的数据

          this.orderData['list'+this.swiperIndex] = this.filterItem.page == 1? data.data || []: [...this.orderData['list'+this.swiperIndex], ...data.data]

          // if(refresh) {
          //   this.orderData['list'+this.swiperIndex] = data.data
          // } else {
          //   this.orderData['list'+this.swiperIndex] = this.orderData['list'+this.swiperIndex].concat(data.data)
          // }
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$set(this.isLoading, this.swiperIndex, false)
          this.nullMsg = msg
        }
        done()
      }).catch((err) => {
        done()
        this.$set(this.isLoading, this.swiperIndex, false)
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    infinite(done) {
      if(this.filterItem.page >= this.pages[this.swiperIndex]) {
        done(true)
        return
      }
      if(!this.isLoading[this.swiperIndex]) {
        this.$set(this.isLoading, this.swiperIndex, true)
        this.filterItem.page += 1
        this.getData(done)
      }

    },
    refresh(done) {
      this.page[this.swiperIndex] = 1
      this.pages[this.swiperIndex] = 0
      this.filterItem.page = 1
      setTimeout(() => {
        //this.orderData['list'+this.swiperIndex] = []
        this.getData(done(), 'refresh')
      }, 1000)

    },
    changeSwiperIndex(index) {
      this.filterItem.status = this.statusTag[index].value
      this.filterItem.page = this.page[index]
      this.swiperIndex = index
      //如果切换后的page为0，表示第一次进入
      if(this.page[index] == 0) {
        this.$set(this.isLoading, this.swiperIndex, true)
        this.page[index] = 1
        this.getData()
      }
    },
    toDetail(oid) {
      if(this.serverID != 8){
        if(this.filterItem.status != '3'){
          this.$router.push({name: 'inDispatch', query: {oid, verify: '999'}})
        } else {
          this.$router.push({name: 'inDispatch', query: {oid}})
        }
      } else {
        if(this.filterItem.status == '7'){
          this.$router.push({path: '/waitingInquiry', query: {oid}})
        } else {
          this.$router.push({path: '/inDispatch2', query: {oid, s: this.filterItem.status}})
        }
      }
    },
    handleComment(oid) {
      this.$router.push({name: 'comment', query: {oid, serviceid: this.serverID}})
    },
    //确认入仓
    handleFinish7(oid, index) {
      let uri = $config.host + '/api/Inquiryzerobear/capacityConfirmOrder'
      this.$vux.loading.show({
        text: '入仓中'
      })
      this.$http.post(uri, qs.stringify({
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token,
        uid: this.$store.state.userInfo.uid,
        oid
      })).then((res) => {
        this.$vux.loading.hide()
        const {code, msg} = res.data
        if(code == '1') {
          this.orderData['list' + this.swiperIndex].splice(index, 1)
          this.changeSwiperIndex(1)
          this.$vux.toast.text('入仓成功', 'middle')
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    //上报司机
    handleReportDriver(oid) {
      this.$router.push({path: '/reportDriver', query: {oid, serviceid: this.serverID}})
    },
    handleCancle(oid, index) {
      this.$vux.confirm.show({
        title: '<i class="icon icon-gantanhao"></i>',
        content: '亲，取消运单调度费不会返还，同时还会扣除您的信用值，信用值过低影响优先获得运单推送，再考虑一下！',
        confirmText: '确认取消',
        cancelText: '再想想',
        onConfirm: () => {
          this.$vux.loading.show({
            text: '运单取消中'
          })
          this.$http.post(this.cancleUri, qs.stringify({
            client: $config.client_type,
            device: $config.device_type,
            token: this.$store.state.userInfo.token,
            uid: this.$store.state.userInfo.uid,
            oid
          })).then((res) => {
            const {code, msg} = res.data
            this.$vux.loading.hide()
            if(code == '1') {
              this.orderData.splice(index, 1)
            } else if (code == '3') {
              this.$vux.toast.text($config.loginErrMsg, 'middle')
              this.$router.push({path: '/logout'})
            } else {
              this.$vux.toast.text(msg, 'middle')
            }

          }).catch((err) => {
            this.$vux.toast.text($config.errMsg, 'middle')
          })
        }
      })
    },
    //上报完成
    handleFinish6(oid, index) {
      let uri = $config.host + '/api/Inquirycitycar/capacityConfirmOrder'
      this.$vux.loading.show({
        text: '上报中'
      })
      this.$http.post(uri, qs.stringify({
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token,
        uid: this.$store.state.userInfo.uid,
        oid
      })).then((res) => {
        this.$vux.loading.hide()
        const {code, msg} = res.data
        if(code == '1') {
          this.changeSwiperIndex(1)
          this.$vux.toast.text('上报成功', 'middle')
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },

    //整车上报完成
    handleFinishZc(oid, index) {
      let uri = $config.host + '/api/Inquirycityvehicle/reportComplete'
      this.$vux.loading.show({
        text: '上报中'
      })
      this.$http.post(uri, qs.stringify({
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token,
        uid: this.$store.state.userInfo.uid,
        oid
      })).then((res) => {
        this.$vux.loading.hide()
        const {code, msg} = res.data
        if(code == '1') {
          this.orderData['list' + this.swiperIndex][index].yl_status = 2
          this.$vux.toast.text('上报成功', 'middle')
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch((err) => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },

    //支付信息费
    handlePay(index, idx) {
      this.$router.push({path: '/payOfInformation', query: {data: JSON.stringify(this.orderData[index][idx])}})
    }

  }
}
</script>

<style scoped>
  .bj-item {
    margin-bottom: 0.3rem;
    box-shadow: 0px 0px 0.1rem rgba(0,0,0,0.1);
    background: #fff;
    padding: 0rem 0.2rem;
  }
  .bj-item .title{
    height: 1rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 0.2rem;
  }
  .bj-item .icon{
    font-size: 0.3rem;
    display: inline-block;
    margin-right: 0.12rem;
    height: 0.5rem;
    width: 0.5rem;
    text-align: center;
  }
  .icon-ziyuan21, .icon-ziyuan11{
    display: inline-block;
    border: 1px solid #f3532c;
    border-radius: 50%;
    color: #f3532c;
  }
  .addressname{
    color: #222;
    font-size: 0.3rem;
  }
  .bj-item .action{
    border-top: 1px solid #eee;
    margin-top: 0.2rem;
    padding: 0.12rem 0rem;
  }
  .bj-item .info .item{
    margin-bottom: 0.12rem;
  }
  .null{
    text-align: center;
    margin-top: 1.4rem;
  }
  .weui-btn + .weui-btn{
    margin-top: 0rem !important;
  }
  #zcbtn .weui-btn_mini{
    padding: 0 0.95em !important;
  }
  .black{
    overflow-y: auto;
  }
  .moneyinfo {
    display: flex;
    justify-content: space-between;
    line-height: 0.3rem;
    align-items: center;
    padding: 0.25rem 0.15rem;
  }
</style>
